<template>
 <header class="navbar">
                <div class="nav-wrap-left">

                     <a class="react back" href="/beauty"><span class="text-icon icon-back">←</span></a>
                </div>
	                 	<span class="nav-header h1">分类</span>
            <div class="nav-wrap-right">

                            <a class="react" gaevent="imt/hd/account" href="" rel="nofollow">
                                <span class="nav-btn">
                                    <span class="text-icon">我的</span>
                                </span>
                            </a>


                            <a class="react headSearch" gaevent="imt/hd/search" href="">
                                <span class="nav-btn">
                                    <i class="text-icon"></i>搜索
                                </span>
                            </a>

            </div>
            <div id="nav-dropdown" class="nav-dropdown">
                <ul>
                    <li><a class="react" gaevent="imt/hd/index" href="//i.meituan.com/"><i class="text-icon">⟰</i>
                        <space></space>首页</a></li>
                    <li><a class="react" gaevent="imt/hd/account" rel="nofollow" href="//i.meituan.com/account/"><i class="text-icon">⍥</i>
                        <space></space>我的</a></li>
                        <li><a class="react headSearch" gaevent="imt/hd/search" href="//i.meituan.com/s/"><i class="text-icon">⌕</i>
                            <space></space>搜索</a></li>
                </ul>
            </div>
        </header>
</template>   

<script>
export default {
    name:"ManicureTitle.vue"
}
</script>

<style scoped>
.navbar {
    height: 1.01rem;
    color: #fff;
    background: #06c1ae;
    border-bottom: 1px solid #21897d;
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
    }
    .navbar .nav-wrap-left {
    height: 1.01rem;
    line-height: 1.01rem;
}
.navbar .h1.nav-header {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    font-size: .36rem;
    font-weight: 400;
    text-align: center;
    line-height: 1rem;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
h1, .h1 {
    font-size: .364rem;
}
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: .28rem;
    margin-bottom: .14rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    line-height: 1.1;
}
.navbar {
    height: 1.01rem;
    color: #fff;
    background: #06c1ae;
    border-bottom: 1px solid #21897d;
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
}
.navbar {
    height: 1.01rem;
    color: #fff;
    background: #06c1ae;
    border-bottom: 1px solid #21897d;
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
}
.navbar .nav-dropdown {
    position: absolute;
    right: .04rem;
    top: 1.06rem;
    width: 2rem;
    background: #06c1ae;
    opacity: .9;
    z-index: 100;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s;
}
.text-icon.icon-back {
    width: .45rem;
    height: -50px;
    vertical-align: middle;
    position: relative;
}
.text-icon {
    font-family: base_icon;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
}

i {
    font-style: italic;
}
.nav-wrap-left a.back {
    height: 1rem;
    width: .45rem;
    line-height: 1rem;
    padding: 0 .3rem;
}

a.react, label.react {
    display: block;
    float: left;
    padding-top: 15px;
    margin-left: 10px;
    color: inherit;
    height: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a {
    color: #06c1ae;
    text-decoration: none;
    outline: 0;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.navbar .nav-wrap-left {
    height: 1.01rem;
    line-height: 1.01rem;
}
.navbar {
    height: 1.01rem;
    color: #fff;
    background: #06c1ae;
    border-bottom: 1px solid #21897d;
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
}
</style>


